window.onload=function(){
    let magnifierImgID = 0;
    //当前的商品数量
    let goodsChangeNum = 1;

    // 1.放大镜效果
    magnifier()

    function magnifier() {
        //模拟数据后台加载 数据中每一个对象是一个图片的大图和小图
        // let imgsrc = goodDate.imgsrc;
        //修改放大镜的图片变为动态加载
        //获取放大镜效果的小图
        let oJqzoomImg = document.querySelector(".jqzoom img");
        //设置图片src
        oJqzoomImg.src = "./images/s1.png";


        //获取外层元素
        let oPreview = document.querySelector(".con .mainCon .previewWrap .preview");
        // 获取小图元素
        let oJqzoom = document.querySelector(".con .mainCon .previewWrap .preview .jqzoom");
        let oMask = null; //初始化蒙版元素
        let oMaxBox = null; //初始化大图外层
        let oMaxImg = null; //初始化大图


        //当放大镜的外层被鼠标移入触发
        oPreview.onmouseenter = function (ev) {
            //判断蒙版是否已经存在
            if (!oMask) {
                //创建蒙版
                oMask = document.createElement("div");
                //给蒙版以添加类名，类名样式书写在css中
                oMask.className = "mask";
                //插入蒙版
                oJqzoom.appendChild(oMask);
            }
            if (!oMaxBox) {
                //创建大图外层
                oMaxBox = document.createElement("div");
                //添加样式
                oMaxBox.className = "maxbox";
                // 插入大图
                oPreview.appendChild(oMaxBox);
                //创建图片
                oMaxImg = new Image();
                oMaxImg.src = "./images/b1.png";
                //当创建大图的时候，根据当前小图的src 获取大图的对应的src
                // oMaxImg.src = imgsrc[magnifierImgID].b;


                // 大图插入大图外层
                oMaxBox.appendChild(oMaxImg);
            }
            // 鼠标移动事件
            oPreview.onmousemove = function (e) {
                //获取蒙版left 和 top 的位置
                var maskPosition = {
                    left: e.clientX - oMask.offsetWidth / 2 - oJqzoom
                    .getBoundingClientRect().left,
                    top: e.clientY - oMask.offsetHeight / 2 - oJqzoom
                    .getBoundingClientRect().top,
                }
                //判断临界值
                if (maskPosition.left <= 0) {
                    maskPosition.left = 0;
                } else if (maskPosition.left >= oJqzoom.clientWidth - oMask.offsetWidth) {
                    maskPosition.left = oJqzoom.clientWidth - oMask.offsetWidth;
                }
                if (maskPosition.top <= 0) {
                    maskPosition.top = 0;
                } else if (maskPosition.top >= oJqzoom.clientHeight - oMask.offsetHeight) {
                    maskPosition.top = oJqzoom.clientHeight - oMask.offsetHeight;
                }

                //对蒙版赋值
                oMask.style.left = maskPosition.left + "px";
                oMask.style.top = maskPosition.top + "px";

                //计算比例：（蒙版可以移动的距离 /  大图能够被移动的距离）
                var scale = (oJqzoom.clientWidth - oMask.offsetWidth) / (oMaxImg.offsetWidth -
                    oMaxBox.clientWidth);
                //计算大图移动的位置
                var maxPosition = {
                    left: maskPosition.left / scale,
                    top: maskPosition.top / scale
                }
                oMaxImg.style.marginTop = -maxPosition.top + "px";
                oMaxImg.style.marginLeft = -maxPosition.left + "px";
            }
            //鼠标离开函数
            oPreview.onmouseleave = function () {
                //移除DOM节点
                oJqzoom.removeChild(oMask);
                oPreview.removeChild(oMaxBox);
                //初始化为null
                oMask = null;
                oMaxBox = null;
                oMaxImg = null;
                //解绑事件
                oPreview.onmousemove = null;
                oPreview.obmouseleave = null;
            }
        }
    }
}